<template>
	<i-drawers bodyHeight="900rpx" v-model="showQD" :diySlot="true">
		<view class="select_bdy">
			<view class="select_title">
				<text @click="navTo('/pages/business/channelManager', 'navigateTo')">渠道管理</text>
				<text class="test_title">选择渠道</text>
				<image @click="showQD = false" src="../../static/images/close_gray_icon.png" mode=""></image>
			</view>
			<view class="bodys">
				<i-selectBody :check="{id: formData.sourceChannel}" :list="channelList" @click="select"></i-selectBody>
				<i-notData v-if="!channelList?.length"></i-notData>
			</view>
		</view>
	</i-drawers>
	<i-drawers bodyHeight="900rpx" v-model="showSG" :diySlot="true">
		<view class="select_bdy">
			<view class="select_title">
				<text></text>
				<text class="test_title">选择施工人员</text>
				<image @click="showSG = false" src="../../static/images/close_gray_icon.png" mode=""></image>
			</view>
			<view class="bodys">
				<i-selectBody :check="{id: formData.builderUserId}" :list="staffList"
					@click="selectStaff"></i-selectBody>
				<i-notData v-if="!staffList.length"></i-notData>
			</view>
		</view>
	</i-drawers>
	<i-drawers bodyHeight="680rpx" v-model="showConfirm" :diySlot="true">
		<view class="select_bdy">
			<view class="select_title">
				<text></text>
				<text class="test_title">确认下单</text>
				<image @click="showConfirm = false" src="../../static/images/close_gray_icon.png" mode=""></image>
			</view>
			<view class="payStr">支付方式</view>
			<i-selectBody
				:list="[{ title: '系统外支付（仅记录）', id: '0' , active: true, url: '../../static/images/money_icon.png'}]"></i-selectBody>
			<view class="buttons">
				<i-buttons radius="4" @click="submit" padding="18rpx 108rpx" size="32" color="#fff"
					bgColor="#FB652E">确认</i-buttons>
			</view>
		</view>
	</i-drawers>
	<view class="goBilling">
		<i-scrollList :noData="false" height="100vh">
			<view style="height: 20rpx;"></view>
			<i-card>
				<view class="card_body">
					<view class="card_left">
						<view class="image">
							<image src='../../static/images/head2@2x.png' mode=""></image>
						</view>
						<view class="item_name">
							<text class="title">{{formData.vno}}</text>
							<view class="item_names">
								<input  placeholder-class="placeholder-class" class="input" style="margin-right: 40rpx;" placeholder-style="fontSize: 26rpx;"
									v-model="formData.customerName" placeholder="姓名" type="text">
								<input placeholder-class="placeholder-class" :disabled="customerType == 0" class="input" v-model="formData.phone" placeholder="手机号"
									type="text">
							</view>
						</view>
					</view>
				</view>
			</i-card>
			<i-card top="20rpx">
				<view class="server_title">
					<view class="server_left">
						<text>*</text>服务项目
					</view>
					<view class="server_R" @click="navTo('/pages/business/addProject', 'navigateTo')">
						<image src="../../static/images/add@2x.png" mode=""></image>
						添加
					</view>
				</view>
				<i-delectItem @del="() => change('delete', item)" v-for="item in selectProject" :key="item.id">
					<view class="inventory_item">
						<view class="item_left">
							<text class="serviceName">{{item.serviceName}}</text>
							<i-price>{{item.price }}</i-price>
						</view>
						<view class="item_R">
							<i-stepNum :value="item.num" @change="(e) => change(e, item)"></i-stepNum>
						</view>
					</view>
				</i-delectItem>
			</i-card>
			<i-card top="20rpx">
				<i-formItem
					:contStyle="{color: formData.sourceChannelName ? '#16161F': '#A0A0AD', textAlign: 'right', width: '72%'}"
					title="渠道来源" @click="showQD = true"
					:content="formData.sourceChannelName ? formData.sourceChannelName : '请选择渠道'" :right="true">
				</i-formItem>
				<i-formItem @click="showSG = true"
					:contStyle="{color: formData.builderUserName ? '#16161F': '#A0A0AD', textAlign: 'right', width: '72%'}"
					title="施工人员" :content="formData.builderUserName ? formData.builderUserName : '请选择施工人员'"
					:right="true">
				</i-formItem>
				<i-formItem title="里程（KM）">
					<input placeholder-class="placeholder-class" v-model="formData.mileage" style="text-align: right;"
						placeholder="请输入公里数" type="number">
				</i-formItem>
				<i-formItem title="油表">
					<text class="yb">E</text>
					<view style="width: 360rpx">
						<slider block-size="24" activeColor="#FB652E" value="0" @changing="sliderChange" min="0"
							max="100" />
					</view>
					<text class="yb">F</text>
					<view style="margin-left: 60rpx; width: 100rpx; text-align: right;">
						{{formData.oil}}%
					</view>
				</i-formItem>
				<i-formItem border="none" title="拍照留档" align="top">
					<view class="imagelist" style="padding-bottom: 10rpx;">
						<view class="" v-for="(item, index) in formData.archiveFileList" :key="index">
							<i-upLoad right="20rpx" v-model="formData.archiveFileList[index]" @success="successList"
								@remove="removeList(index)">
							</i-upLoad>
						</view>
					</view>
				</i-formItem>
				<i-formItem title="工单备注" align="top" border="none">
					<input placeholder-class="placeholder-class" class="inputs" v-model="formData.remark"
						placeholder="请输入工单备注" type="text" />
					<!-- <textarea placeholder-style="color: #A0A0AD" v-model="formData.remark" class="textarea" placeholder="请输入工单备注"></textarea> -->
				</i-formItem>
			</i-card>
			<view style="height: 220rpx;"></view>
		</i-scrollList>
		<view class="float_bottom">
			<view class="float_body">
				<view class="prices">
					<i-price :size="28">{{allPrice.toFixed(2)}}</i-price>
					合计
				</view>
				<i-buttons @click="handleClick" radius="4" padding="18rpx 108rpx" size="32" color="#fff"
					bgColor="#FB652E">下单</i-buttons>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		computed,
		ref
	} from 'vue';
	import useStore from '../../stores/index'
	import { navTo, showTost, } from '../../utils/common';
	import { orderCreate, getSourceChannelList } from '../../api/business';
	import {
		listMerClerk,
	} from '../../api/store'
	import { phoneReg, spaceReg } from '../../utils/regs';

	const store = useStore()
	const showQD = ref(false)
	const showConfirm = ref(false)
	const showSG = ref(false)
	const channelList = ref([])
	const staffList = ref([])
	const customerType = ref('')

	const formData = reactive({
		"vno": "",
		"customerName": "",
		"phone": '',
		remark: '',
		'oil': 0,
		mileage: '',
		archiveFileList: [''],
		sourceChannel: '',
		sourceChannelName: '',
		builderUserId: '',
		builderUserName: ''
	})

	const selectProject = computed(() => store.projectList)
	const allPrice = computed(() => {
		return store.projectList && store.projectList.length && store.projectList.map(i => i.num * i.price).reduce((i : any, next : any) => {
			return i + (next || 0)
		}) || 0
	})


	onLoad((option) => {
		if (option.vno) {
			formData.vno = option.vno
			formData.phone = option.mobile
			formData.customerName = option.userName
			customerType.value = option.customerType
		}
		getPageList()
	})

	const sliderChange = (e : { detail : { value : number } }) => {
		formData.oil = e.detail.value
	}

	const successList = () => {
		if (formData.archiveFileList.length < 3 && !(formData.archiveFileList.some((item : string) => !item)))
			formData.archiveFileList.push('')
	}
	const removeList = (index : number) => {
		// console.log(formData.archiveFileList, 'formData.archiveFileList');
		if (formData.archiveFileList.filter(i => i).length === 2) {
			formData.archiveFileList.splice(index, 1, '')
			return
		}
		if (formData.archiveFileList.length > 1) {
			formData.archiveFileList.splice(index, 1)
		}
	}

	const getChannelList = async () => {
		const data = await getSourceChannelList({ tyjPageNum: 1, tyjPageSize: 30 })
		channelList.value = data.rows.map(item => {
			return {
				title: item.channelName,
				id: item.id,
				active: false
			}
		})
		const index = channelList.value.findIndex(i => i.id === formData.sourceChannel)
		console.log(channelList.value, 'channelList', formData, 'formData');
		if (index === -1) {
			formData.sourceChannel = ''
			formData.sourceChannelName = ''
		} else {
			formData.sourceChannelName = channelList.value[index].title
		}
	}



	const select = (e : { title : string, id : string }) => {
		formData.sourceChannel = e.id
		formData.sourceChannelName = e.title
		showQD.value = false
	}
	const change = (e : string, i : { id : string }) => {
		store.changeProjectList(i.id, e)
	}

	const handleClick = () => {
		if (!selectProject?.value?.length) {
			showTost('至少选择一项服务项目')
			return
		}
		if (spaceReg.test(formData.customerName)) {
			showTost('姓名不可包含空格符')
			return
		}
		if (formData.phone && !phoneReg.test(formData.phone)) {
			showTost('请输入正确手机号')
			return
		}
		if (Number(formData.mileage) < 0) {
			showTost('请输入正确里程')
			return
		}
		showConfirm.value = true
	}
	const submit = async () => {
		await orderCreate({
			...formData,
			mileage: Number(formData.mileage),
			archiveFileList: formData.archiveFileList.filter(i => i),
			detailList: selectProject.value.map(item => {
				return {
					nums: item.num,
					serviceId: item.id
				}
			})
		})
		showConfirm.value = false
		showTost('开单成功！', () => {
			navTo('', 'navigateBack')
		})
	}
	const getPageList = async () => {
		const data = await listMerClerk({
			tyjPageNum: 1,
			tyjPageSize: 30
		})
		staffList.value = data.rows.map((item : { clerkName : string, id : string, userHeadUrl : string }) => {
			return {
				title: item.clerkName,
				id: item.id,
				active: false,
				url: item.userHeadUrl
			}
		})
	}
	const selectStaff = (e : { title : string, id : string }) => {
		formData.builderUserId = e.id
		formData.builderUserName = e.title
		showSG.value = false
	}

	onShow(() => {
		getChannelList()
	})

	onUnload(() => {
		store.projectList = []
	})
</script>

<style lang="scss" scoped>
	.goBilling {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f4f5;

		.input {
			font-size: 26rpx;
			border-bottom: 1px dashed #eaeaea;
		}

		.server_title {
			@include flexRS;
			margin-bottom: 8rpx;

			.server_left {
				@include flexR;
				@include titlefont(32rpx);

				text {
					@include dfont(32rpx);
					color: #FF453A;
				}
			}

			.server_R {
				@include flexR;
				@include dfont(32rpx);
				font-weight: bold;
				color: #5C6D80;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx
				}
			}
		}

		.card_body {
			@include flexRS;

			.card_left {
				@include flexR;

				.image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 64rpx;
					margin-right: 24rpx;

					image {
						width: 64rpx;
						height: 64rpx;
						border-radius: 64rpx;
					}
				}

				.item_name {
					@include flexC;
					@include dfont(26rpx);

					.title {
						@include titlefont(28rpx);
						margin-bottom: 12rpx;
					}

					.item_names {
						@include flexR;

						text {
							@include dWeight;
							margin-right: 20rpx;
							color: #5C6D80;
						}
					}

				}
			}

		}

	}

	.yb {
		@include dfont;
		color: #A0A0AD;
	}

	.textarea {
		margin-top: 20rpx;
		width: 90%;
		height: 180rpx;
		border-radius: 8rpx;
		border: 2rpx solid #F3F4F5;
		padding: 12rpx;
	}

	.float_bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 0 63rpx 0;

		.float_body {
			@include flexRS;
			width: calc(100% - 64rpx);
			margin: 0 auto;

			.prices {
				@include flexC;
				@include dfont(24rpx);
				color: #A0A0AD;
			}
		}
	}

	.select_title {
		@include flexRS;
		width: calc(100% - 64rpx);
		margin: 0 auto;
		margin-bottom: 32rpx;
		@include titlefont(28rpx);
		color: #5C6D80;

		.test_title {
			@include titlefont(32rpx);
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}


	}

	.inventory_item {
		@include flexRS;
		height: 153rpx;
		border-bottom: 1rpx solid #f3f4f5;

		.item_left {
			@include flexC;
			width: 60%;

			.serviceName {
				@include overflow;
				max-width: 90%;
			}

			text {
				@include titlefont(28rpx);
				margin-bottom: 8rpx;
			}

		}
	}

	.buttons {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		margin-top: 200rpx;
		border-top: 1rpx solid #F3F4F5;
		padding-top: 20rpx;
	}

	.payStr {
		@include titlefont(28rpx);
		padding: 24rpx;
		margin-left: 32rpx;
	}

	.imagelist {
		width: 100%;
		@include flexR;
		flex-wrap: wrap;
	}

	.bodys {
		height: 600rpx;
		overflow-y: scroll;
	}

	.inputs {
		margin-top: 24rpx;
		border: 1rpx solid #f3f4f5;
		border-radius: 8rpx;
		padding: 8rpx 0rpx 24rpx 12rpx;
		width: 100%;
		text-align: left;
	}
</style>